<template>
  <body>
    <el-form :model="logininfo" label-width="auto" style="max-width: 330px">
      <el-form-item label="用户昵称">
        <el-input v-model="logininfo.UserNickname" />
      </el-form-item>
      <el-form-item label="用户密码">
        <el-input v-model="logininfo.UserPassword" style="width: 240px" type="password" />
      </el-form-item>
      <el-form-item label="验证码">
        <el-input v-model="captChainfo.YZChar" style="width: 140px" />
        <el-image style="width: 110px; height: 40px" :src="captChainfo.CaptchaUrl" alt="Description of the image" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="Loginff()">登录</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </body>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { useCounterStore } from '@/stores/counter';
import router from '@/router';
const stores = useCounterStore()
const logininfo = reactive({
  UserNickname: "",
  UserPassword: "",
})

const captChainfo = reactive({
  CaptchaUrl: "",
  CaptchaChar: "",
  YZChar: ""
})


const Loginff = () => {
  if (captChainfo.CaptchaChar.toLowerCase() !== captChainfo.YZChar.toLowerCase()) {
    ElMessage.error("验证码不正确");
    GetCaptcha();
    return;
  }
  axios.get("http://120.26.135.179:8033/api/Login", {
    params: {
      UserNickname: logininfo.UserNickname,
      UserPassword: logininfo.UserPassword
    }
  }).then(res => {
    if (res.data.code == 0) {
      stores.LoginUserInfo.userId = res.data.data.userId;
      stores.LoginUserInfo.userNickname = res.data.data.userNickname;
      stores.LoginUserInfo.userName = res.data.data.userName;
      stores.LoginUserInfo.userPassword = res.data.data.userPassword;
      stores.LoginUserInfo.userPhone = res.data.data.userPhone;
      stores.LoginUserInfo.errorCount = res.data.data.errorCount;
      stores.LoginUserInfo.isLocked = res.data.data.isLocked;
      stores.LoginUserInfo.roleId = res.data.data.roleId;
      stores.LoginUserInfo.roleName = res.data.data.roleName;
      stores.LoginUserInfo.perId = res.data.data.perId;
      stores.LoginUserInfo.perName = res.data.data.perName;
      stores.LoginUserInfo.perChar = res.data.data.perChar;
      stores.LoginUserInfo.token = res.data.data.token;


      ElMessage.success("登录成功");
      if (stores.LoginUserInfo.roleId == 1) {
        //判断是管理员还是游客
        router.push({
          name: "Show"
        })
      } else {
        router.push({
          name: "Main"
        })
      }
    } else {
      ElMessage.error(res.data.message);
    }
  }).catch(error => {
    ElMessage.error("登录失败");
  });
};


const GetCaptcha = () => {
  axios.get("http://120.26.135.179:8033/api/GenerateNumericCaptcha").then(res => {
    if (res.data.code == 0) {
      captChainfo.CaptchaChar = res.data.data.captchaChar;
      captChainfo.CaptchaUrl = res.data.data.captchaUrl;
    } else {
      ElMessage("验证码获取失败！");
    }
  })
};

onMounted(() => {
  GetCaptcha();
});
</script>
<style scoped>
@media (min-width: 200px) {
  body {
    display: grid;
    place-items: center;
  }
}
</style>